.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 12px;
  left: 1.5%;
  z-index: 999;
  background-image: url("../../../../imgs/back.png");
  background-size: 100% 100%;

  /* background: linear-gradient(#f0000044, #ff06); */
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
}

.draw-area {
  position: relative;
  max-width: 540px;
  height: 100vh;
  overflow: hidden;
}

.draw-area canvas {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.result {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  font-size: 2rem;
  font-weight: bold;
  transition: all 0.3s;
}

.controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10%;
}

.buttons {
  width: 164px;
  height: 59px;
  background: url("https://img.js.design/assets/img/62c79585d8d32ddbc02be7df.png");
  background-size: 100% 100%;
  color: rgb(255 255 255 / 100%);
  letter-spacing: 4px;
  font-size: calc(8px + 2vmin);
  line-height: 34.09px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  border: none;
  transition: all 0.3s;
  user-select: none;
}

.buttons:hover {
  text-shadow: 0 0 2rem #000;
}

.timing {
  position: absolute;
  top: 10%;
  left: 84.5%;
  z-index: 99;
  color: rgb(255 255 255 / 100%);
  letter-spacing: -0.82px;
  font-size: calc(16px + 2vmin);
  line-height: 44px;
  font-weight: 900;
  user-select: none;
}

.modal-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.draw-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: calc(12px + 2vmin);
}
